<template>
  <div>
    <el-dialog :model-value="visible" width="680px" title="添加楼层" @close="handleClose" :fullscreen="mobile" class="dialog-content-clear">
      <el-alert title="说明：使用开门方式为密码时，需定期用电子钥匙开门以获取锁电量和开门记录，建议使用客户端好房享住微信小程序开门。" type="warning" :closable="false" />
      <div class="ph-16 mt20">
        <el-row class="mb10" v-for="item in 3" :key="item">
          <el-col :span="6">
            <div style="width: 140px;" class="text-ellipsis">劲叶公寓04睡觉了阿斯兰的看法就阿里山的空间发阿里山可见度发</div>
          </el-col>
          <el-col :span="6">
            <div>密码：<el-text type="warning">123456789</el-text></div>
          </el-col>
          <el-col :span="8">
            <div>有效期：2024-01-13 21：00 单次</div>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSendMessage">发送短信</el-button>
          <el-button type="primary" @click="handleSendEmail">邮箱发送</el-button>
        </span>
      </template>
    </el-dialog>
    <SendPassword
      :type="sendPasswordType"
      :visible="messageVisible"
      @cancel="() => messageVisible = false"
      @ok="handleSendMessageOk"
    />
  </div>
</template>
<script setup name="ShowingsPwd">
import useAppStore from '@/store/modules/app'
import SendPassword from '@/components/SendPassword'

const emit = defineEmits()
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})
const messageVisible = ref(false)
const sendPasswordType = ref('message')
const mobile = computed(() => useAppStore().device === 'mobile')

// 发送短信
function handleSendMessage() {
  emit('cancel')
  sendPasswordType.value = 'message'
  messageVisible.value = true
}
// 发送短信弹窗确认事件
function handleSendMessageOk() {
  messageVisible.value = false
}

function handleClose() {
  emit('cancel')
}

function handleSendEmail() {
  emit('cancel')
  sendPasswordType.value = 'email'
  messageVisible.value = true
}

</script>
